前言

在現代前端開發中，效率與性能變得越來越重要。Vue 3 的 Composition API、TypeScript 的強型別系統，以及 Vite 的超快打包速度，讓開發者能更輕鬆地創建和維護大型應用。這篇文章將教你如何使用 Vite 和 UnoCSS 搭建一個 Vue 3 + TypeScript 的開發環境，並通過 UnoCSS 實現靈活的樣式設計。

步驟 1：初始化項目

首先，我們將使用 Vite 初始化一個 Vue 3 + TypeScript 項目。Vite 是一個現代化的前端工具，具有極快的啟動速度和更高效的打包性能。

作者使用 bun 作為 nodejs 執行工具，如果讀者使用 npm 或是 yarn, pnpm 的可以參照官方網站給予的資訊 參考連結

1. 打開終端，運行以下命令來初始化項目：

bunx create-vite --template vue-ts my-vue-app

2. 接著進入項目目錄並安裝依賴：

cd my-vue-app
bun install

3. 運行開發伺服器以確認項目啟動成功：

bun run dev

此時，瀏覽器應該會自動打開並顯示 Vue 3 頁面。

步驟 2：安裝 UnoCSS

UnoCSS 是一個功能強大的原子 CSS 引擎，可以為項目提供靈活的樣式定義。我們將其整合到這個項目中。

1. 在項目中安裝 UnoCSS 和必要的插件：

bun add unocss

2. 在 Vite 的配置文件 vite.config.ts 中添加 UnoCSS 插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [vue(), UnoCSS()],
});

4. 在項目的入口文件 main.ts 中引入 UnoCSS：

import { createApp } from 'vue';
import App from './App.vue';
import 'uno.css';

createApp(App).mount('#app');

步驟 3：創建 Vue 組件並使用 UnoCSS

1. 創建一個 src/components/MyNewComponent.vue 文件：

<template>
  <div class="p-4 text-center">
    <h1 class="text-4xl font-bold">Hello, UnoCSS!</h1>
    <p class="text-lg mt-2">使用 UnoCSS 來設計靈活的樣式</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyNewComponent',
});
</script>

以上是比較早期的寫法，可能在一些台灣培訓單位會這樣教，但業界我建議寫成以下做法

<template>
  <div class="p-4 text-center">
    <h1 class="text-4xl font-bold">Hello, UnoCSS!</h1>
    <p class="text-lg mt-2">使用 UnoCSS 來設計靈活的樣式</p>
  </div>
</template>

<script lang="ts" setup></script>

unocss 有提供 presetAttributify 的寫法，因此可以再簡化成，可以省略 class 的寫法

<template>
  <div p-4 text-center>
    <h1 text-4xl font-bold>Hello, UnoCSS!</h1>
    <p text-lg mt-2>使用 UnoCSS 來設計靈活的樣式</p>
  </div>
</template>

<script lang="ts" setup></script>

2. 在 App.vue 中引入這個組件並進行顯示：

<template>
 <MyNewComponent />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import MyNewComponent from './components/MyNewComponent.vue';

export default defineComponent({
 components: {
   MyNewComponent,
 },
});
</script>

一樣以上也是比較早期的寫法，建議改成用 setup 處理

<template>
 <MyNewComponent />
</template>

<script lang="ts" setup>
  import MyNewComponent from './components/MyNewComponent.vue';
</script>

步驟 4：運行與驗證

bun run dev

此時，你應該能夠在瀏覽器中看到 "Hello, UnoCSS!" 的字樣，並且應用了 UnoCSS 的樣式規則。

結論:

通過這篇文章，我們快速搭建了一個基於 Vite 的 Vue 3 + TypeScript 開發環境，並且使用 UnoCSS 提供靈活的樣式設計。這種組合不僅具有高效的開發體驗，還能極大提高應用的性能和可維護性。接下來的日子裡，我們將深入探討如何在這個基礎上構建更複雜的功能和模組。